import React, { useState } from 'react';
import { EllipsisOutlined } from '@ant-design/icons';
import type {
  ConfigProviderProps,
  RadioChangeEvent,
  TableProps,
  TourProps,
  UploadFile,
} from 'antd';
import {
  Button,
  Calendar,
  ConfigProvider,
  DatePicker,
  Divider,
  Form,
  Image,
  Input,
  InputNumber,
  Modal,
  Pagination,
  Popconfirm,
  QRCode,
  Radio,
  Select,
  Space,
  Table,
  theme,
  TimePicker,
  Tour,
  Transfer,
  Upload,
} from 'antd';
import enUS from 'antd/locale/en_US';
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs';

import 'dayjs/locale/zh-cn';

  type Locale = ConfigProviderProps['locale'];

  dayjs.locale('en');
  
  const { Option } = Select;
  const { RangePicker } = DatePicker;
  
  const columns: TableProps['columns'] = [
    {
      title: 'Name',
      dataIndex: 'name',
      filters: [{ text: 'filter1', value: 'filter1' }],
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
  ];
  
  const Page = () => {
    const { token } = theme.useToken();
  
    const [open, setOpen] = useState(false);
    const [tourOpen, setTourOpen] = useState(false);
    const tourRefs = React.useRef<HTMLElement[]>([]);
  
    const showModal = () => {
      setOpen(true);
    };
  
    const hideModal = () => {
      setOpen(false);
    };
  
    const info = () => {
      Modal.info({
        title: 'some info',
        content: 'some info',
      });
    };
  
    const confirm = () => {
      Modal.confirm({
        title: 'some info',
        content: 'some info',
      });
    };
  
    const steps: TourProps['steps'] = [
      {
        title: 'Upload File',
        description: 'Put your files here.',
        target: () => tourRefs.current[0],
      },
      {
        title: 'Save',
        description: 'Save your changes.',
        target: () => tourRefs.current[1],
      },
      {
        title: 'Other Actions',
        description: 'Click to see other actions.',
        target: () => tourRefs.current[2],
      },
    ];
  
    const fileList: UploadFile[] = [
      {
        uid: '-1',
        name: 'image.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
      {
        uid: '-2',
        percent: 50,
        name: 'image.png',
        status: 'uploading',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
      {
        uid: '-3',
        name: 'image.png',
        status: 'error',
      },
    ];
  
    return (
      <div>
      <Space
        direction="vertical"
        size={[0, 16]}
        style={{ width: '100%', paddingTop: 16, borderTop: `1px solid ${token.colorBorder}` }}
      >
        <Pagination defaultCurrent={1} total={50} showSizeChanger />
        <Space wrap>
          <Select showSearch style={{ width: 200 }}>
            <Option value="jack">jack</Option>
            <Option value="lucy">lucy</Option>
          </Select>
          <DatePicker />
          <TimePicker />
          <RangePicker />
        </Space>
        <Space wrap>
          <Button type="primary" onClick={showModal}>
            Show Modal
          </Button>
          <Button onClick={info}>Show info</Button>
          <Button onClick={confirm}>Show confirm</Button>
          <Popconfirm title="Question?">
            <a href="#">Click to confirm</a>
          </Popconfirm>
        </Space>
        <Transfer dataSource={[]} showSearch targetKeys={[]} />
        <Form name="basic" autoComplete="off" labelCol={{ sm: { span: 4 } }} wrapperCol={{ span: 6 }}>
          <Form.Item label="Username" name="username" rules={[{ required: true }]}>
            <Input width={200} />
          </Form.Item>
          <Form.Item
            label="Age"
            name="age"
            rules={[{ type: 'number', min: 0, max: 99 }]}
            initialValue={100}
          >
            <InputNumber width={200} />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 2, span: 6 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
        <Table dataSource={[]} columns={columns} />
        <Modal title="Locale Modal" open={open} onCancel={hideModal}>
          <p>Locale Modal</p>
        </Modal>
        <Space wrap size={80}>
          <QRCode
            value="https://ant.design/"
            status="expired"
            onRefresh={() => console.log('refresh')}
          />
          <Image
            width={160}
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          />
        </Space>
        <Upload listType="picture-card" fileList={fileList} />
        <Divider orientation="left">Tour</Divider>
        <Button type="primary" onClick={() => setTourOpen(true)}>
          Begin Tour
        </Button>
        <Space>
          <Button
            ref={(node) => {
              node && tourRefs.current.splice(0, 0, node);
            }}
          >
            {' '}
            Upload
          </Button>
          <Button
            ref={(node) => {
              node && tourRefs.current.splice(1, 0, node);
            }}
            type="primary"
          >
            Save
          </Button>
          <Button
            ref={(node) => {
              node && tourRefs.current.splice(2, 0, node);
            }}
            icon={<EllipsisOutlined />}
          />
        </Space>
        <Tour open={tourOpen} steps={steps} onClose={() => setTourOpen(false)} />
      </Space>
      </div>
    );
  };
  
  const index: React.FC = () => {
    const [locale, setLocal] = useState<Locale>(enUS);
  
    const changeLocale = (e: RadioChangeEvent) => {
      const localeValue = e.target.value;
      setLocal(localeValue);
      if (!localeValue) {
        dayjs.locale('en');
      } else {
        dayjs.locale('zh-cn');
      }
    };
  
    return (
      <div>

        <div style={{ marginBottom: 16 }}>
          <span style={{ marginInlineEnd: 16 }}>语言切换:</span>
          <Radio.Group value={locale} onChange={changeLocale}>
            <Radio.Button key="en" value={enUS}>
              English
            </Radio.Button>
            <Radio.Button key="cn" value={zhCN}>
              中文
            </Radio.Button>
          </Radio.Group>
        </div>
        <ConfigProvider locale={locale}>
          <Page />
        </ConfigProvider>
      </div>
    );
  }

export default index